<template>
	<!-- 面包屑 -->
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
		<el-breadcrumb-item>角色管理</el-breadcrumb-item>
	</el-breadcrumb>
	<!-- 行内表单 -->
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
		<el-form-item label="角色名称">
			<el-input v-model="formInline.roleName" placeholder="请输入角色名称" clearable @clear="query" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="seek">搜索</el-button>
			<el-button type="primary" @click="dialogVisible = true">新增角色</el-button>
			<el-button type="danger" @click="removeAll">批量删除</el-button>
		</el-form-item>
	</el-form>

	<!-- 新增/编辑角色弹出框 -->
	<el-dialog v-model="dialogVisible" :title="title" width="500" @close="cancle">
		<el-form :model="form" label-width="auto" style="max-width: 600px">
			<el-form-item label="角色名称">
				<el-input v-model="form.roleName" placeholder="请输入角色名称" />
			</el-form-item>
			<el-form-item label="角色代码">
				<el-input v-model="form.roleCode" placeholder="请输入角色代码" />
			</el-form-item>
			<el-form-item label="描述">
				<el-input v-model="form.description" placeholder="请输入描述" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="add">确定</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 表格 -->
	<div>
		<el-table ref="multipleTableRef" border :data="tableData" row-key="id" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column property="id" label="ID" />
			<el-table-column property="roleName" label="角色名称" />
			<el-table-column property="roleCode" label="角色代码" />
			<el-table-column property="description" label="描述" />
			<el-table-column label="操作">
				<template #default='scope'>
					<el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>

	<!-- 分页 -->
	<el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
		:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top: 8px;" />
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref } from 'vue'
	import type { TableInstance } from 'element-plus'
	import axios from 'axios'
	import { ElMessage, ElMessageBox } from 'element-plus'

	// 后端角色接口基础路径（统一管理，避免硬编码）
	const BASE_API = 'http://localhost:8080/sysRole'

	// 行内表单（查询条件+分页参数）
	const formInline = reactive({
		roleName: '', // 角色名称查询条件
		pageNum: 1,
		pageSize: 5
	})

	// 行内表单搜索
	const seek = () => {
		formInline.pageNum = 1; // 搜索时重置页码为第1页
		query();
	}

	// 弹出框相关
	const dialogVisible = ref(false);
	const title = ref('新增角色')
	const form = ref({
		id: '',
		roleName: '',
		roleCode: '',
		description: '',
		del: '', // 新增del字段，与后端数据模型对齐（可选）
	})

	// 编辑按钮：打开弹窗并回显数据
	const edit = (row) => {
	    dialogVisible.value = true;
	    title.value = '编辑角色';
	    // 深拷贝整行数据，包含del字段（保持原值）
	    form.value = { ...row }; 
	    // 若后端返回的del为null，无需特殊处理，保持null即可
	}

	// 取消/关闭弹窗：重置表单
	const cancle = () => {
		form.value = {
			id: '',
			roleName: '',
			roleCode: '',
			description: '',
			del: null
		}
	}

	// 表格数据
	const tableData = ref([]);
	const total = ref(0);
	const multipleTableRef = ref<TableInstance>()

	// 查询角色列表（核心：修正接口路径）
	const query = () => {
		axios.get(`http://localhost:8080/sysRole/page`, { // 调用角色分页接口
			params: formInline // 传递查询条件和分页参数
		})
			.then((resp) => {
				// 后端返回格式：{total: 15, pages: 3, list: [...], ...}
				tableData.value = resp.data.list; // 从返回数据中取list
				total.value = resp.data.total; // 从返回数据中取total
			})
			.catch((err) => {
				console.error('查询角色列表失败：', err);
				ElMessage.error('获取角色数据失败，请重试');
			})
	}

	// 页面加载时初始化数据
	onMounted(() => {
		query();
	})

	// 新增/编辑提交（修正接口路径和请求方法）
	const add = () => {
	    // 区分新增（无id）和编辑（有id）
	    if (form.value.id) {
	        // 编辑：调用后端 /edit 接口，无需在路径中携带id（sysRole对象中已包含id）
	        axios.post(`${BASE_API}/edit`, form.value) // 修正路径为 /edit
	            .then((resp) => {
	                if (resp.data.code === 200) {
	                    ElMessage.success('编辑成功');
	                    dialogVisible.value = false;
	                    query(); // 重新加载数据
	                } else {
	                    ElMessage.error('编辑失败：' + (resp.data.message || ''));
	                }
	            })
	            .catch((err) => {
	                console.error('编辑角色失败：', err);
	                ElMessage.error('网络错误，编辑失败');
	            })
	    } else {
	        // 新增：调用后端 /add 接口（保持不变）
	        axios.post(`${BASE_API}/add`, form.value)
	            .then((resp) => {
	                if (resp.data.code === 200) {
	                    ElMessage.success('添加成功');
	                    dialogVisible.value = false;
	                    query();
	                } else {
	                    ElMessage.error('添加失败：' + (resp.data.message || ''));
	                }
	            })
	            .catch((err) => {
	                console.error('新增角色失败：', err);
	                ElMessage.error('网络错误，添加失败');
	            })
	    }
	}

	// 分页相关
	const handleSizeChange = (val) => {
		formInline.pageSize = val;
		query();
	}
	const handleCurrentChange = (val) => {
		formInline.pageNum = val;
		query();
	}

	// 单个删除（修正接口路径为本地服务）
	const remove = (id) => {
	    ElMessageBox.confirm(
	        '此操作将永久删除该数据, 是否继续?',
	        '提示',
	        {
	            confirmButtonText: '确定',
	            cancelButtonText: '取消',
	            type: 'warning',
	        }
	    )
	    .then(() => {
	        // 修正路径：添加 /remove 层级，与后端 @DeleteMapping("/remove/{id}") 匹配
	        axios.delete(`${BASE_API}/remove/${id}`) 
	            .then((resp) => {
	                if (resp.data.code === 200) {
	                    ElMessage.success('删除成功')
	                } else {
	                    ElMessage.error('删除失败：' + (resp.data.message || ''));
	                }
	                query() // 重新加载数据
	            })
	            .catch((err) => {
	                console.error('删除角色失败：', err);
	                ElMessage.error('网络错误，删除失败');
	            });
	    })
	    .catch(() => {
	        ElMessage({ type: 'info', message: '取消删除' })
	    })
	}

	// 批量删除
	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
	  multipleSelection.value = val.map(item => item.id); // 收集选中的id
	}
	const removeAll = () => {
	  if (multipleSelection.value.length === 0) {
	    ElMessage.warning('请选择要删除的数据');
	    return;
	  }
	
	  ElMessageBox.confirm(
	    `此操作将永久删除选中的${multipleSelection.value.length}条数据, 是否继续?`,
	    '提示',
	    {
	      confirmButtonText: '确定',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  )
	    .then(() => {
	      // 直接将id数组作为请求体发送，符合@RequestBody List<Integer>的要求
	      axios.post(`${BASE_API}/removeBatch`, multipleSelection.value)
	        .then((resp) => {
	          if (resp.data.code === 200) {
	            ElMessage.success('批量删除成功');
	            multipleSelection.value = []; // 清空选择
	            query(); // 重新加载数据
	          } else {
	            ElMessage.error('批量删除失败：' + (resp.data.message || ''));
	          }
	        })
	        .catch((err) => {
	          console.error('批量删除失败：', err);
	          ElMessage.error('网络错误，批量删除失败');
	        });
	    })
	    .catch(() => {
	      ElMessage({ type: 'info', message: '取消删除' })
	    });
	}
</script>

<style>
	.el-breadcrumb {
		margin-bottom: 15px;
		paddbing: 15px;
		border-bottom: 1px solid #ddd;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}
</style>